<template>
	<div id="components-layout-home-basic">

		<a-layout>
			<sp-menu :menuList="menuList" :theme="theme" :title="title" :openKeys="openKeys" :collapsed="collapsed" :collapsible="true">
			</sp-menu>


			<a-layout :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
				<sp-header :collapsed="collapsed" @toggle="toggleCollapsed"></sp-header>

				<a-layout-content :style="{ height: '100%', margin: '1px 1px 0', paddingTop: '0' }">
					<transition name="page-toggle">
						<keep-alive>
							<router-view />
						</keep-alive>
					</transition>
				</a-layout-content>
					
				<a-layout-footer> 2019@sp-admin 第一次迭代 </a-layout-footer>
			</a-layout>

		</a-layout>
	</div>
</template>

<script>
	import {
		queryMenuList
	} from '@/axios/service/menuApi'
	import { triggerWindowResizeEvent } from '@/utils/util'
	import config from '@/config/defaultSettings'
	import SpMenu from '@/components/Menu/SpMenu'
	import SpHeader from '@/components/Layouts/SpHeader'
	import { mapActions } from 'vuex'

	export default {
		components: {
			SpHeader,
			SpMenu
		},

		data() {
			return {
				production: config.production,
				collapsed: false,
				openKeys: ['/home/register'],
				menuList: [],
				theme: config.navTheme,
				title: "SP-CAH-ADMIN"
			};
		},
		create() {
			this.collapsed = !this.sidebarOpened
		},
		mounted() {
			this.getUserInfo()
			this.queryMenuList()
			
		},
		computed: {
			// ...mapGetters(['loginName','nickname']),
			contentPaddingLeft() {
				return '0px'
			}
		},
		watch: {
			// sidebarOpened(val) {
			// 	this.collapsed = !val
			// }
		},
		methods: {
			...mapActions(['GetUserInfo']),
			
			toggleCollapsed() {
				this.collapsed = !this.collapsed
				// this.setSidebar(!this.collapsed)
				triggerWindowResizeEvent()
			},
			queryMenuList() {
				var params = {};
				params.method = "0";
				queryMenuList(params).then((data) => {
					window.console.log(data)
					if (data.status == 0) {
						this.menuList = data.result;
					}

				}).catch(function(error) {
					window.console.log(error)
				});
			},
			getUserInfo() {
				const {GetUserInfo} = this
				var params = {};
				GetUserInfo(params).then((data) => {
					this.$notification.success({
						message: '欢迎',
						description: data.userName + `，欢迎回来`  //${timeFix()}
					})
				}).catch(error =>{
					this.$router.push({ path: '/login' }, () => {
						this.$notification.error({
							message: '错误',
							description: `您已成功返回登录页面，如有其它操作请检查登录用户权限设置!!!`
						})
					})
					window.console.log(error)
					}
				);
			}
		}
	};
</script>


<style lang="less">
	#components-layout-home-basic {
		/* text-align: center; */
	}

	.layout-content {
		// padding-left: 0px;
		// min-height: 100vh;
	}


	#components-layout-home-basic .ant-layout-header,
	#components-layout-home-basic .ant-layout-footer,
	#components-layout-home-basic .ant-layout-sider {
		/* background: #fff; */
		/* color: #; */
		padding: 0;
		/* border: 1px solid #a8d2ff; */
	}

	#components-layout-home-basic .ant-layout-footer {
		/* 	height: 5vh;
		line-height: 5vh;
		text-align: center;
		background: rgba(255, 255, 255, 0.2); */
	}

	#components-layout-home-basic .ant-layout-header {
		/* 	height: 8vh;
		line-height: 8vh;*/
		background: #fff;
	}

	#components-layout-home-basic .ant-layout-sider {
		/* background: #fff; */
		/* color: #fff; */
		/* 	height: 87vh;
		line-height: 87vh; */
	}

	#components-layout-home-basic .ant-layout-content {
		background: #fff;
		/* color: #fff; */
		/* height: 85vh; */
		/* line-height: 87vh; */
	}

	#components-layout-home-basic>.ant-layout {
		/* margin-bottom: 48px; */
	}

	#components-layout-home-basic>.ant-layout:last-child {
		margin: 0;
	}

	#components-layout-home-basic .logo-title {
		/* font-family:cursive;text-shadow:6px 2px 2px #333;
		color:#191616e0; */
		// font-size: 27px;
	}
</style>
